<template>
    <div class="wrap">
        <van-list>
            <div v-for="item in conversationList" :key="item.conversationID" class="item" @click="goChat(item.conversationID)">
                <div class="left">

                    <van-icon v-if="item.unreadCount" :badge="item.unreadCount" name="https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_16.png" size="30"></van-icon>
                    <van-icon v-else name="https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_16.png" size="30"></van-icon>
                </div>
                <div class="rigth" style="display: flex; flex-direction: column; justify-content: space-between;">
                    <span class="title" style="font-size: 16px; color: #000;">{{item.userProfile.userID}}</span>
                    <span class="detail" style="font-size: 14px; color: #888;">
                        {{item.lastMessage.payload.text}}
                    </span>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script setup>
import { ref} from 'vue'
import TencentCloudChat from "@tencentcloud/chat";
import { useRouter } from 'vue-router';
import { chat } from '../../utils/chat';

const router = useRouter();
const conversationList = ref([]);
const getHuiHuaList = async () => {
    const res = await chat.getConversationList({
        type: TencentCloudChat.TYPES.CONV_C2C
    });
    console.log(res);
    conversationList.value = res.data.conversationList || [];
}
getHuiHuaList()
chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, (event) => {
    console.log(event, '别人发送消息过来了....');
    getHuiHuaList()
    console.log(conversationList);
});

const goChat =async (id) => {
    const res = await chat.setMessageRead({conversationID: id});
    console.log(res);
    router.push({
        path:`/chat/${id}`
    })
}
</script>

<style scoped lang="less">
.wrap{
    width: 100%;
    height: 100%;
    padding: 10px;
    .item{
        display: flex;
        padding: 10px 0px;
        border-bottom: 1px solid #eee;
        .left{
            margin-right: 10px;
        }
    }
}
</style>